<template>
  <view class="invite_wrap">
    <view class="invite_content">
      <qrcode :val="val" canvasId="invite_qrcode"  @updateQRCodeUrl="updateQRCodeUrl" ref="qrcode" v-if="!qrcodeUrl && val"></qrcode>
      <image :src="qrcodeUrl" mode="aspectFit" v-if="qrcodeUrl" class="qrcode_img"></image>
    </view>
    <view class="tip">
      长按保存图片
    </view>
  </view>
</template>

<script>
import { getPromQrcodeApi} from '@/service/qrCode/qrCode.service.js';
import qrcode from './invite_code.vue'
export default {
  components: {
    qrcode
  },
  data () {
    return {
      val: '',
      qrcodeUrl: ''
    }
  },
  methods: {
    updateQRCodeUrl (obj) {
      this.qrcodeUrl = obj.url;
    },
    getPromQrcode () { // 获取推广码相关信息
      getPromQrcodeApi({}, res => { 
        if (res.status == 0 && res.data) {
          this.val = res.data.qrCodeUrl;
        }
      });
    }
  },
  onShow () {
    this.getPromQrcode();
  }
}
</script>

<style lang="scss" scope>
  .invite_wrap {
    width: 100%;
    height: 100vh;
    background-color: #3c3a3a;
    position: relative;
    .invite_content {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      .qrcode_img {
        height: 1090rpx;
      }
    }
    .tip {
      width: 100%;
      position: absolute;
      text-align: center;
      bottom: 60rpx;
      color: #FEF0CE;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
</style>
